<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- Payment -->
		<div class="m1280 payment">Payment</div>
		<div class="sceInp m1280 f f-a-c f-j-b">
			<div class="lefBox f f-a-c">
				<div :class="{ act: ind == 1 }" @click="qie(1)" class="rigBtn hand">Manage my payment</div>
				<div :class="{ act: ind == 2 }" @click="qie(2)" class="rigBtn hand">Add payment details</div>
			</div>
			<div v-show="ind == 1" class="rigInp f f-a-c f-j-b">
				<input type="text" v-model="value" class="inp" name="" id="" />
				<img class="hand" src="/src/assets/user/sousuo2.png" alt="" />
			</div>
		</div>
		<!-- 下面的表格 -->
		<div v-if="ind == 1" class="tabTop m1280">
			<div class="tabsHand f f-a-c">
				<div class="tabItem">Status</div>
				<div class="tabItem">Date</div>
				<div class="tabItem">Transaction</div>
				<div class="tabItem">Order number</div>
				<div class="tabItem">Service</div>
				<div class="tabItem">Total</div>
				<div class="tabItem">Refund</div>
				<div class="tabItem">Invoices</div>
			</div>
			<div class="tabItemFu f f-a-c">
				<div class="tabItem">Paid</div>
				<div class="tabItem">4/3/2023</div>
				<div class="tabItem">PaymentF<br />I19637823835</div>
				<div class="tabItem outlin hand">FO5214DFD09C7</div>
				<div class="tabItem">Standard order</div>
				<div class="tabItem">$100.23</div>
				<div class="tabItem">No</div>
				<div class="tabItem">View</div>
			</div>
			<div class="tabItemFu f f-a-c">
				<div class="tabItem">Paid</div>
				<div class="tabItem">4/3/2023</div>
				<div class="tabItem">PaymentF<br />I19637823835</div>
				<div class="tabItem outlin hand">FO5214DFD09C7</div>
				<div class="tabItem">Standard order</div>
				<div class="tabItem">$100.23</div>
				<div class="tabItem">No</div>
				<div class="tabItem">View</div>
			</div>
		</div>
		<div class="m1280 addPlay" v-else>
			<div class="addPlayBox f f-a-c f-w-w">
				<div class="itemBox f f-d-c">
					<div class="topTom">Tom</div>
					<div class="f f-a-c f-j-b">
						<div class="num">**** 0568</div>
						<div @click="dolingShow()" class="edit hand">Edit</div>
					</div>
				</div>
				<div class="itemBox f f-d-c">
					<div class="topTom">Tom</div>
					<div class="f f-a-c f-j-b">
						<div class="num">**** 0568</div>
						<div @click="dolingShow()" class="edit hand">Edit</div>
					</div>
				</div>
				<div style="justify-content: center" class="itemBox hand f f-a-c f-j-c">
					<div @click="dolingShowAdd()" class="jiaAdd">+ Add payment method</div>
				</div>
			</div>
		</div>
		<!-- 点击edit进行编辑 -->
		<el-dialog v-model="dialogVisible" width="1080">
			<div class="diatitle">Edit payment method</div>
			<div class="diaxain"></div>
			<div class="diaform f f-a-c">
				<div class="formLef">
					<div class="tit">Payment details</div>
					<div class="card">Card number <span>*</span></div>
					<input type="text" v-model="form.num" class="diainp" name="" id="" />
					<div class="expDate f f-a-c f-j-b">
						<div style="width: 48%" class="">
							<div class="card">Exp date <span>*</span></div>
							<input type="text" v-model="form.date" class="diainps" name="" id="" />
						</div>
						<div style="width: 48%" class="">
							<div class="card">CVV <span>*</span></div>
							<input type="text" v-model="form.cvv" class="diainps" name="" id="" />
						</div>
					</div>
					<div class="card">First name <span>*</span></div>
					<input type="text" v-model="form.firname" class="diainp" name="" id="" />
					<div class="card">Middle name</div>
					<input type="text" v-model="form.midname" class="diainp" name="" id="" />
					<div class="card">Last name <span>*</span></div>
					<input type="text" v-model="form.lastname" class="diainp" name="" id="" />
				</div>
				<div class="formRig">
					<div class="" style="margin-left: 10%; width: 100%">
						<div class="tit">Billing address</div>
						<div class="card">Location <span>*</span></div>
						<div style="margin-bottom: 24px">
							<el-select v-model="form.location" placeholder="America" size="large" style="width: 90%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="expDate f f-a-c f-j-b">
							<div style="width: 48%" class="">
								<el-select v-model="form.state" placeholder="State" size="large" style="width: 100%">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
							<div style="width: 48%" class="">
								<el-select v-model="form.city" placeholder="City" size="large" style="width: 100%">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
						</div>
						<div class="card">Address</div>
						<input type="text" v-model="form.address" class="diainp" placeholder="Address line 1" name="" id="" />
						<input type="text" v-model="form.address2" class="diainp" placeholder="Address line 2" style="margin-top: -15px" name="" id="" />
						<div class="card">Company <span>*</span></div>
						<input type="text" v-model="form.company" class="diainp" name="" id="" />
						<div class="expDate f f-a-c f-j-b">
							<div style="width: 48%" class="">
								<div class="card">Postal/ZIP Code <span>*</span></div>
								<input type="text" v-model="form.postal" class="diainps" name="" id="" />
							</div>
							<div style="width: 48%" class="">
								<div class="card">Phone</div>
								<input type="text" v-model="form.phone" class="diainps" name="" id="" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="btnDet f f-a-c f-j-b">
				<div class="lefBtnDet hand">Delete</div>
				<div class="lefBtnSave hand">Save</div>
			</div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let dialogVisible = ref(false);
	let ind = ref(1);
	let value = ref("");
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		},
		{
			value: "Option5",
			label: "Option5"
		}
	];
	let form = reactive({
		num: "",
		cvv: "",
		firname: "",
		location: "",
		midname: "",
		phone: "",
		state: "",
		company: "",
		city: "",
		postal: "",
		address: "",
		address2: "",
		lastname: "",
		date: ""
	});
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const qie = num => {
		ind.value = num;
	};
	const dolingShow = () => {
		dialogVisible.value = true;
	};
	const dolingShowAdd = () => {
		dialogVisible.value = true;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
